Skip to content

feat(expo): add native component theming via Expo config plugin#8243

Draft
chriscanin wants to merge 1 commit intomainfrom
chris/native-components-theming
Draft

feat(expo): add native component theming via Expo config plugin#8243
chriscanin wants to merge 1 commit intomainfrom
chris/native-components-theming

Conversation

@chriscanin
Copy link
Copy Markdown
Member

Adds support for customizing native Clerk UI components (sign-in, sign-up, user profile) on both iOS and Android via a JSON theme configuration file referenced in the Expo plugin config:

["@clerk/expo", { "theme": "./clerk-theme.json" }]

The JSON schema supports:

  • colors: 15 semantic color tokens (primary, background, danger, etc.)
  • darkColors: dark mode color overrides (iOS uses @Environment colorScheme, Android uses ClerkTheme.darkColors)
  • fonts: fontFamily string or per-style overrides (iOS only)
  • design: borderRadius

Plugin changes:

  • Reads and validates the JSON at prebuild time
  • iOS: Embeds theme in Info.plist; removes UIUserInterfaceStyle when darkColors is present to enable system dark mode
  • Android: Copies JSON to app assets directory

Native changes:

  • iOS: Parses theme from Info.plist, builds light/dark ClerkTheme objects, applies via .environment(.clerkTheme) with colorScheme switching
  • Android: Parses theme from assets JSON, sets Clerk.customTheme
  • Both: AuthView now uses Clerk.customTheme instead of null

Description

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Adds support for customizing native Clerk UI components (sign-in, sign-up,
user profile) on both iOS and Android via a JSON theme configuration file
referenced in the Expo plugin config:

  ["@clerk/expo", { "theme": "./clerk-theme.json" }]

The JSON schema supports:
- colors: 15 semantic color tokens (primary, background, danger, etc.)
- darkColors: dark mode color overrides (iOS uses @Environment colorScheme,
  Android uses ClerkTheme.darkColors)
- fonts: fontFamily string or per-style overrides (iOS only)
- design: borderRadius

Plugin changes:
- Reads and validates the JSON at prebuild time
- iOS: Embeds theme in Info.plist; removes UIUserInterfaceStyle when
  darkColors is present to enable system dark mode
- Android: Copies JSON to app assets directory

Native changes:
- iOS: Parses theme from Info.plist, builds light/dark ClerkTheme objects,
  applies via .environment(\.clerkTheme) with colorScheme switching
- Android: Parses theme from assets JSON, sets Clerk.customTheme
- Both: AuthView now uses Clerk.customTheme instead of null
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 6, 2026

⚠️ No Changeset found

Latest commit: 3f2f058

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Apr 6, 2026 8:26pm

Request Review

@github-actions github-actions bot added the expo label Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant